import { Card, Breadcrumb, Button, Tabs, Space, message, Popover } from 'antd'
import { Link } from 'react-router-dom'
import CompareModal from './components/CompareModal'
import { useState } from 'react'
import { compareSolutions } from '@/apis/compare'
import './index.scss'
import TabIGD from './components/TabIGD'
import TabHV from './components/TabHV'
import TabTotal from './components/TabTotal'
import TabCmetric from './components/TabCmetric'
import IGDCard from './CardItem/IGDCard'
import HVCard from './CardItem/HVCard'
import { RightCircleOutlined, ExportOutlined, DownSquareOutlined } from '@ant-design/icons'
import { ExportExcel } from '@/utils'
import CMetricCard from './CardItem/CMetric'
import TotalCard from './CardItem/TotalCard'

const Compare = () => {


  const [isModalOpen, setIsModalOpen] = useState(false)
  const showModal = () => {
    setIsModalOpen(true)
  }
  const handleOk = () => {
    setIsModalOpen(false)
  }

  const [IGDdata, IGDsetData] = useState({})
  const [HVdata, HVsetData] = useState({})
  const [CMetricdata, CMetricsetData] = useState({})

  const handleCancel = async (selectedRows) => {
    if (selectedRows) {
      const res = await compareSolutions(selectedRows)
      IGDsetData(res[0])
      HVsetData(res[1])
      CMetricsetData(res[2])
    }
    setIsModalOpen(false)
  }

  // 分页激活项
  const [activeKey, setActiveKey] = useState('1')
  const changeTab = (key) => {
    setActiveKey(key)
  }

  // 导出数据
  const [IGDTabledata, IGDTablesetData] = useState([])
  const [HVTabledata, HVTablesetData] = useState([])
  const [CMetricTabledata, CMetricTablesetData] = useState([])
  const [TotalTabledata, TotalTablesetData] = useState([])
  const [IGDTablecolumns, IGDTablesetColumns] = useState([])
  const [HVTablecolumns, HVTablesetColumns] = useState([])
  const [CMetricTablecolumns, CMetricTablesetColumns] = useState([])
  const [TotalTablecolumns, TotalTablesetColumns] = useState([])

  const handleIGDExport = (data, columns) => {
    IGDTablesetData(data)
    IGDTablesetColumns(columns)
  }
  const handleHVExport = (data, columns) => {
    HVTablesetData(data)
    HVTablesetColumns(columns)
  }
  const handleCmetricExport = (data, columns) => {
    CMetricTablesetData(data)
    CMetricTablesetColumns(columns)
  }
  const handleTotalExport = (data, columns) => {
    TotalTablesetData(data)
    TotalTablesetColumns(columns)
  }

  const exportExcel = () => {
    if (IGDTabledata.length === 0) {
      message.warning('无表格数据，请选择算法进行比较')
      return
    }
    if (activeKey === '1') {
      ExportExcel(IGDTablecolumns, IGDTabledata, 'IGD')
    } else if (activeKey === '2') {
      ExportExcel(HVTablecolumns, HVTabledata, 'HV')
    }
    else if (activeKey === '3') {
      ExportExcel(CMetricTablecolumns, CMetricTabledata, 'C-metric')
    } else {
      ExportExcel(TotalTablecolumns, TotalTabledata, 'Total')
    }
  }

  // tab分页设置项
  const generateItems = () => {
    return new Array(4).fill(null).map((_, i) => {
      const id = String(i + 1)
      if (i === 0) {
        return {
          label: `IGD`,
          key: id,
          children: <TabIGD IGDdata={IGDdata} handleExport={handleIGDExport} />,
        }
      } else if (i === 1) {
        return {
          label: `HV`,
          key: id,
          children: <TabHV HVdata={HVdata} handleExport={handleHVExport} />,
        }
      } else if (i === 2) {
        return {
          label: `C-metric`,
          key: id,
          children: <TabCmetric CMetricdata={CMetricdata} handleExport={handleCmetricExport} />,
        }
      } else {
        return {
          label: `Total`,
          key: id,
          children: <TabTotal
            handleExport={handleTotalExport}
            IGDdata={IGDdata} HVdata={HVdata} CMetricdata={CMetricdata} />,
        }
      }
    })
  }

  const tabItems = generateItems()




  return (
    <div>
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: '算法性能分析' },
          ]}
            className='breadcrumb'
          />
        }
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
          <Space size={'large'}>
            <Button type='primary'
              onClick={showModal}
              icon={<RightCircleOutlined />}
              style={{
                backgroundColor: "#eb2f96"
              }}
            >选择算法</Button>
            <Button type='primary'
              onClick={exportExcel}
              icon={<ExportOutlined />}
            >导出表格</Button>
          </Space>
          <Space size={'small'} style={{
            marginRight: '25vw'
          }}>
            <Popover placement="bottomLeft" title={IGDCard} color='white'
            >
              <Button type='primary'
                style={{
                  backgroundColor: '#13c2c2'
                }}
                icon={<DownSquareOutlined />}
              >IGD介绍</Button>
            </Popover>
            <Popover placement="bottomLeft" title={HVCard} color='white'>
              <Button type='primary'
                style={{
                  backgroundColor: '#13c2c2'
                }}
                icon={<DownSquareOutlined />}
              >HV介绍</Button>
            </Popover>
            <Popover placement="bottomRight" title={CMetricCard} color='white'>
              <Button type='primary'
                style={{
                  backgroundColor: '#13c2c2'
                }}
                icon={<DownSquareOutlined />}
              >C-metric介绍</Button>
            </Popover>
            <Popover placement="bottomRight" title={TotalCard} color='white'>
              <Button type='primary'
                style={{
                  backgroundColor: '#13c2c2'
                }}
                icon={<DownSquareOutlined />}
              >Total介绍</Button>
            </Popover>
          </Space>
        </div>

        <Tabs
          activeKey={activeKey}
          onChange={changeTab}
          tabPosition={'left'}
          type="card"
          style={{
            marginTop: 20,
            height: '65vh'
          }}
          items={tabItems}
        />

        <CompareModal
          isModalOpen={isModalOpen}
          handleOk={handleOk}
          handleCancel={handleCancel}
        />

      </Card>
    </div>
  )
}

export default Compare